<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习vue</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            padding: 12px;
        }
        .f1{
            background-color: coral;
        }
        .f2{
            background-color: rgb(214, 250, 12);
        }
        .f3{
            background-color: rgb(10, 222, 250);
        }
    </style>
</head>
<body>
    <div id="root">
        <div>
            <!-- v-for是遍历数组拿到遍量，key要指定（最多使用） -->
            <div v-for="p in persons" :key="p.id">
                {{p.name}} -- {{p.age}}
            </div>
            <!-- key可以指定成index -->
            <div v-for="(p,index) in persons" :key="index">
                {{p.name}} -- {{p.age}}
            </div>
            <!-- in可以写成of -->
            <!-- <div v-for="(p,index) of persons" :key="index"> -->
            <!-- v-for遍历对象 -->
            <div v-for="(value,k) in p2" :key="k">
                {{k}} -- {{value}}
            </div>
            <!-- v-for遍历字符串（极少用） -->
            <div v-for="(char,index) in p3" :key="index">
                {{index}} -- {{char}}
            </div>
            <!-- v-for遍历数字（极少用） -->
            <div v-for="(number,index) in 10" :key="index">
                {{number}} -- {{index}}
            </div>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'zzz1',
                persons:[
                    {id:'001',name:"f1",age:20},
                    {id:'002',name:"f2",age:20},
                    {id:'003',name:"f3",age:20},
                ],
                p2:{
                    id:'001',
                    name:"f1",
                    age:20
                },
                p3:"how are you?",
            },
            computed:{
            },
            methods:{
            },
            watch:{
            },
        })
    </script>    
</body>
</html>